<template>
    <div class="shouye">
        <div class="acea-row cursor">
            <div class="acea-row top-item">
                <div class="top-icon">
                    <img class="imgwh" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/data01.png" alt="">
                </div>
                <div class="ml10 acea-row row-column row-between">
                    <div class="font12">累计使用用户数据</div>
                    <div class="font12">{{ sumOrder.max_user_count || 0 }} <span class="font8">个</span> </div>
                </div>
            </div>
            <div class="acea-row top-item">
                <div class="top-icon">
                    <img class="imgwh" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/data02.png" alt="">
                </div>
                <div class="ml10 acea-row row-column row-between">
                    <div class="font12">今日使用数据</div>
                    <div class="font12">{{ sumOrder.day_user_count || 0 }} <span class="font8">个</span> </div>
                </div>
            </div>
            <div class="acea-row top-item">
                <div class="top-icon">
                    <img class="imgwh" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/data03.png" alt="">
                </div>
                <div class="ml10 acea-row row-column row-between">
                    <div class="font12">累计订单数据</div>
                    <div class="font12">{{ sumOrder.max_order_count || 0 }} <span class="font8">单</span> </div>
                </div>
            </div>
            <div class="acea-row top-item">
                <div class="top-icon">
                    <img class="imgwh" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/data03.png" alt="">
                </div>
                <div class="ml10 acea-row row-column row-between">
                    <div class="font12">累计今日订单数据</div>
                    <div class="font12">{{ sumOrder.day_order_count || 0 }} <span class="font8">单</span> </div>
                </div>
                <div class="sanjiaox"><img class="imgwh" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/sanjiaox.png" alt=""></div>
                <div class="acea-row row-column row-between">
                    <div class="font10">上门订单：{{ sumOrder.home_order_count || 0 }}单</div>
                    <div class="font10">回收箱订单：{{ sumOrder.box_order_count || 0 }}单</div>
                </div>
            </div>
        </div>

        <!--        直线-->
        <div class="zhixian mt30"></div>

        <div class="acea-row " style="margin-top: 50px">
            <div class="yuedu-box">
<!--                <div class="ml20">月度用户活跃度和订单数据（近8月）</div>-->
                <div id="yuedu" class="yuedu-biao"></div>
            </div>
            <div class="acea-row row-column " style="width: 50%;height: 500px">
                <div class="yonghu acea-row row-between">
                    <div class="acea-row row-column ">
                        <div class=" font16 mt30">使用上门回收用户</div>
                        <div class="mt30">
                            <div class="bold font16">{{ shanmen_data.count }}</div>
                            <div class="acea-row row-middle">
                                <div class="font12">较昨日</div>
                                <div class="ml10">
                                    <span class="font16">{{ shanmen_data.add_count }}</span>
                                    <img class="ml10" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/up-icon.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="huishouyonghu mt20">
                        <img class="imgwh" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/huishouyonghu.png" alt="">
                    </div>
                </div>
                <div class="acea-row row-between mt30" style="width: 100%">
                    <div class="bushe acea-row row-between">
                        <div class="acea-row row-column ">
                            <div class="font16 mt30">回收箱的布设</div>
                            <div class="mt30">
                                <div class="bold font16">{{ box_order_data.count }}</div>
                                <div class="acea-row row-middle">
                                    <div class="font12">较昨日</div>
                                    <div class="ml10">
                                        <span class="font16">{{ box_order_data.add_count }}</span>
                                        <img class="ml10" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/up-icon.png" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="Group">
                            <img class="imgwh" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/Group.png" alt="">
                        </div>
                    </div>
                    <div class="pinglv" style="margin-left: 30px;">
                        <div class="acea-row row-column row-between">
                            <div class="font16 mt30">回收箱的日使用频次</div>
                            <div class="mt30">
                                <div class="bold font16">{{ box_count_data.count }}</div>
                                <div class="acea-row row-middle">
                                    <div class="font12">较昨日</div>
                                    <div class="ml10">
                                        <span class="font16">{{ box_count_data.add_count }}</span>
                                        <img class="ml10" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/up-icon.png" alt="">

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="pinci">
                            <img class="imgwh" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/pinci.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>

<!--        直线-->
        <div class="zhixian"></div>

        <div class="acea-row mt30" style="width: 100%">
<!--            左边-->
            <div style="width: 50%">
                <div class="font16">回收箱订单</div>
                <div class="recovery-order">
                    <div v-for="(item,index) in box_order_list" :key="index">
                        <div class="big-nav acea-row" v-if="index==0">
                            <div class="big-img">
                                <img class="imgwh" :src="item.image" alt="">
                            </div>
                            <div class="ml20">
                                <div class="font14 mt5">用户ID：{{ item.uid }}</div>
                                <div class="font14 mt5">回收箱ID：{{ item.box_number }}</div>
                                <div class="font14 mt5">订单日期：{{ item.date }}</div>
                                <div class="font14 mt5">订单时间：{{ item.time }}</div>
                                <div class="font14 mt5">包裹估重：{{ item.weight }}kg</div>
                            </div>
                        </div>
                        <div class="big-item acea-row" v-else>
                            <div class="item-icon">
                                <img class="imgwh" :src="item.image" alt="">
                            </div>
                            <div class="font14 ml20 acea-row row-around row-column">
                                <div class="acea-row row-middle">
                                    <div style="width: 150px;">用户ID：{{ item.uid }}</div>
                                    <div>订单时间：{{ item.add_time }}</div>
                                </div>
                                <div class="acea-row row-middle">
                                    <div style="width: 150px;">回收箱ID：{{ item.box_number }}</div>
                                    <div>包裹估重：{{ item.weight }}kg</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt20">
                    <div class="font14">预约上门订单</div>
                    <div class="shangmen mt10">
                        <div class="men-item acea-row row-middle" v-for="(item,index) in home_order_list" :key="index">
                            <div class="" style="width: 150px;">
                                <div>用户ID：{{ item.uid }}</div>
                                <div class="mt20">包裹种类：{{ item.type_name }}</div>
                            </div>
                            <div class="ml20">
                                <div>下单时间：{{ item.add_time }}</div>
                                <div class="mt20">上门地址：{{ item.user_address }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
<!--            右边-->
            <div class="data-nav">
                <div class="font16 ml20">回收箱数据</div>
                <div class="list">
                    <div class="item" v-for="(item,index) in map_box_list" :key="index">
                        <div class="top-bot acea-row">
                            <div class="pic">
                                <img class="imgwh" :src="item.image" alt="">
                            </div>
                            <div class="acea-row row-column row-around ml20 font14" style="flex: 1">
                                <div class="acea-row row-between">
                                    <div>{{ item.name }}</div>
                                    <div class="yuzhi">阈值：{{ item.capacity_max || 0 }}m³</div>
                                </div>
                                <div>{{ item.address }}</div>
                            </div>
                        </div>
                        <div class="acea-row row-between-wrapper p20">
                            <div class="font14">
                                <div>回收箱大约已使用：{{ item.capacity || 0 }}m³</div>
                                <div class="mt10">回收箱大约剩余：{{ item.capacity_now || 0 }}m³</div>
                            </div>
                            <div class="progess">
                                <div class="progess-on" v-if="item.capacity_bili>0" :style="{width: item.capacity_bili+'%'}">{{ item.capacity_bili }}%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<!--        地图组件-->
            <div>
                <div class="map" id="container"  :style="{display: mapshow}"></div>
            </div>
<!--                <div class="colse-map">-->
<!--                    <img class="imgwh" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/colse-map.png" alt="">-->
<!--                </div>-->


        <!--        窗口信息-->
<!--        <div style="display: none">-->
<!--            <infowindow ref="infoWindow" :title="maptitle" :isShow="shuiyuantype" :mapshow="mapshow" :key="timers"></infowindow>-->
<!--        </div>-->


    </div>
</template>

<script>
    import {
        getHome
    } from '@/api/index'
    import AMapLoader from '@amap/amap-jsapi-loader'
    import infowindow from "@/components/infowindow";
    import vueCustomScrollbar from 'vue-custom-scrollbar'
    export default {
        name: "Index",
        components:{
            vueCustomScrollbar,
            infowindow
        },
        data(){
            return {
                settings: {
                    suppressScrollY: false,
                    suppressScrollX: false,
                    wheelPropagation: false
                },
                map: null,
                infoWindow: null,
                markerData:null,
                markers:[],
                maptitle:'1号箱',
                shuiyuantype:1,

                // mapshow: true,//信息窗口
                timers:'',//组件key
                pointList:[
                    // { latitude:'108.155878', longitude:'22.808794',title:'1号箱' },
                    // { latitude:'108.414142', longitude:'22.841903',title:'2号箱' },
                ],
                mapinfoxy:{},
                latitude: 108.294983,
                longitude: 22.824605,

                alarm:'',//提示
                sumOrder:[],
                dateSumOrder:[],//月度用户活跃度和订单数据
                shanmen_data:[], //使用上门回收用户
                box_order_data:[],//回收箱的布设
                box_count_data:[], //回收箱的日使用频次
                box_order_list:[],//回收箱订单
                home_order_list:[],//上门回收订单
                map_box_list:[],//地图上回收箱列表
                map_staff_list:[],//地图员工列表

                dateList:[],
                orderCount:[],
                userCount:[],
                mapshow: 'none',//地图展示
                markerList:[],
            }
        },
        computed:{
            is_show() {
                return this.$store.state.userInfo.map_is_show;
            },
        },
        watch:{
            is_show: {
                handler(nval, oval) {
                    console.log('val',nval);
                    if(nval){
                        this.mapshow = 'block'
                    }else{
                        this.mapshow = 'none'
                    }
                  window.scroll({
                    top: 0,
                    left: 0,
                    behavior: 'smooth' // 可选，平滑滚动效果
                  });
                },
                deep: true, // 深度监听
                immediate: true,//立即执行
            },
        },
        mounted() {
            this.gethome();

        },
        methods:{
            gethome(){
                let data = {
                    latitude:'108.155878',
                    longitude:'22.808794'
                }
                getHome(data).then(res=>{
                    this.alarm = res.data.alarm;
                    this.sumOrder = res.data.sumOrder;
                    this.shanmen_data = res.data.shanmen_data;
                    this.box_order_data = res.data.box_order_data;
                    this.box_count_data = res.data.box_count_data;
                    this.box_order_list = res.data.box_order_list;
                    this.home_order_list = res.data.home_order_list;
                    this.map_box_list = res.data.map_box_list;
                    this.map_staff_list = res.data.map_staff_list;
                    this.$store.commit("userInfo/tips", res.data.alarm);
                    let list = res.data.dateSumOrder;
                    list.forEach((item)=>{
                        this.dateList.push(item.date)
                        this.orderCount.push(item.order_count)
                        this.userCount.push(item.user_count)
                    })

                    this.createYD();

                    this.map_box_list.forEach(item=>{
                        let son = {
                            name : item.name,
                            longitude : item.longitude,
                            latitude : item.latitude,
                            pic:'https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/map-box-icon.png'
                        }
                        this.pointList.push(son);
                    })
                    this.map_staff_list.forEach(item=>{
                        let son = {
                            name : item.staff_name,
                            longitude : item.longitude,
                            latitude : item.latitude,
                            pic:'https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/map-person-icon.png'
                        }
                        this.pointList.push(son);

                    })

                    this.initMap();
                    this.$set(this,'mapshow','block')
                    // this.$nextTick(()=>{
                    //     console.log('11111')
                    //     this.initMap();
                    // })
                    // setTimeout(()=>{
                    //     this.initMap();
                    // },500)
                })
            },

            getTimers(){
                this.timers = Number( new Date() );
            },
            initMap(){
                let self = this;
                console.log('2222222')
                self.markers = [];
                AMapLoader.load({
                    key:"bb58b67345ce92d5a31009ef7685bf50",
                    version:"1.4.15",
                }).then((AMap)=>{
                    self.map = new AMap.Map("container",{  //设置地图容器id
                        resizeEnable: true,
                        viewMode:"2D",    //是否为3D地图模式
                        zoom:14,           //初始化地图级别
                        center: [self.latitude, self.longitude], //初始化地图中心点位置
                        attributionControl: false,
                    })
                    for (var i = 0, marker; i < this.pointList.length; i++) {
                        marker = new AMap.Marker({
                            position: [this.pointList[i].longitude,this.pointList[i].latitude], //不同标记点的经纬度
                            map: self.map,
                            icon: this.pointList[i].pic,
                            size: new AMap.Size(40, 40),
                        });
                        marker.setLabel({
                            direction:'top',
                            offset: new AMap.Pixel(0, -10),  //设置文本标注偏移量
                            content: `<div class='info'>${ this.pointList[i].name }<div class="bottom"></div></div>`, //设置文本标注内容
                        });
                        this.markers.push(marker)
                    }
                    this.map.add(this.markers)

                }).catch(e=>{
                    console.log(e);
                })
            },

            createYD(){
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("yuedu"));
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: `月度用户活跃度和订单数据`,
                    },
                    tooltip: {},
                    xAxis: {
                        type: 'category',
                        data: this.dateList
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: this.orderCount,
                            type: 'bar',
                            smooth: true
                        },
                        {
                            data: this.userCount,
                            type: 'bar',
                            smooth: true
                        }
                    ]
                });
            }

        }
    }
</script>

<style lang="less">

    .amap-marker-label {
        border-radius: 5px;
        text-align: center;
        font-size: 14px;
        border: 0;
        width: 150px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #999999;
        /*box-shadow: 0 0 5px rgba(0,0,0,1);*/
    }
    .info{
        position: relative;
        box-sizing: border-box;
        width: 100%;

        .bottom{
            height: 0;
            width: 0;
            clear: both;
            text-align: center;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 20px solid #fff;
            position: absolute;
            left: 40%;
            z-index: 999;
        }
    }

    .shouye{
        margin-top: 30px;

        .huishouyonghu{
            width: 70%;
            height: 70%;
        }
        .Group{
            width: 50%;
            height: 45%;
            margin-top: 40px;
            margin-right: 20px;
        }
        .pinci{
            width: 50%;
            height: 35%;
            position: absolute;
            top: 30%;
            right: 20px;
        }

        .top-item~.top-item{
            border-left: 1px solid #D3D3D3;
        }
        .top-item{
            padding: 0 50px;
            color: #333;

            .top-icon{
                width: 40px;
                height: 42px;
            }

            .sanjiaox{
                width: 38px;
                height: 35px;
            }

        }
        .yuedu-box{
            width: 50%;
            /*border: 1px solid red;*/
        }
        .yuedu-biao{
            /*width: 750px;*/
            flex: 1;
            height: 500px;
        }

        .yonghu{
            width: 100%;
            height: 200px;
            background: linear-gradient(180deg, #F2F9FE -3%, #E6F4FE 100%);
            border-radius: 5px;
            /*margin-top: 50px;*/
            padding: 10px 20px;
        }

        .bushe{
            width: 48%;
            height: 200px;
            background: linear-gradient(180deg, #F5FEF2 -3%, #E6FEEE 100%);
            border-radius: 5px;
            padding: 10px 20px;
        }
        .pinglv{
            width: 48%;
            height: 200px;
            background: linear-gradient(180deg, #F2F9FE -3%, #E6F4FE 100%);
            border-radius: 5px;
            padding: 10px 20px;
            position: relative;
        }

        .zhixian{
            width: 100%;
            height: 0.5px;
            background-color: #D3D3D3;
            /*border: 1px solid #D3D3D3;*/
        }

        .recovery-order{
            width: 100%;
            height: 600px;
            overflow-y: auto;
            padding-right: 20px;
            /*border: 1px solid red;*/

            /*.scroll-area {*/
            /*    position: relative;*/
            /*    margin: auto;*/
            /*    width: 600px;*/
            /*    height: 400px;*/
            /*    border: 1px solid #000;*/
            /*}*/

            .big-nav{
                border-bottom: 1px solid #D3D3D3;
                padding: 20px 10px;

                .big-img{
                    width: 250px;
                    height: 190px;
                    /*background-color: #2d8cf0;*/
                    border-radius: 8px;
                    overflow: hidden;
                }
            }

            .big-item{
                padding: 20px 10px;
                border-bottom: 1px solid #D3D3D3;

                .item-icon{
                    width: 80px;
                    height: 80px;
                    /*background-color: #2d8cf0;*/
                    border-radius: 5px;
                    overflow: hidden;
                }
            }

        }

        .shangmen{
            width: 100%;
            height: 250px;
            overflow-y: auto;
            padding: 20px 10px;

            .men-item{
                width: 100%;
                height: 100px;
                box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);
                margin-bottom: 20px;
                border-radius: 5px;
                padding: 0 10px;
                font-size: 14px;
            }
        }

        .data-nav{
            width: 48%;
            /*margin-left: 30px;*/

            .list{
                overflow-y: auto;
                height: 870px;
                width: 100%;
                padding: 10px 20px;
                margin-top: 10px;

                .item{
                    width: 100%;
                    height: 232px;
                    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);
                    margin-bottom: 20px;
                    border-radius: 5px;

                    .top-bot{
                        border-bottom: 1px solid #D3D3D3;
                        padding: 20px;

                        .pic{
                            width: 88px;
                            height: 88px;
                            background-color: #eeeeee;
                            border-radius: 5px;
                            overflow: hidden;
                        }
                        .yuzhi{
                            color: #26C691;
                        }
                    }
                    .progess{
                        width: 264px;
                        height: 35px;
                        border-radius: 18px;
                        background-color: #C4F1E2;
                        position: relative;

                        .progess-on{
                            position: absolute;
                            top: 0;
                            right: 0;
                            bottom: 0;
                            /*width: 50%;*/
                            height: 35px;
                            border-radius: 18px;
                            background-color: #26C691;
                            color: #ffffff;
                            line-height: 35px;
                            font-size: 14px;
                            padding-left: 10px;
                        }
                    }
                }

            }


        }

        .map{
            width: 98%;
            height: 800px;
            margin-top: 30px;
            border-radius: 12px;
            margin-left: 10px;
            position: relative;

            .colse-map{
                width: 130px;
                height: 320px;
                z-index: 9999;
            }

        }

    }
</style>
